<html>
	<head>
		  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <script src="js/echarts.min.js"></script>
      <script src="js/mui.js"></script>
     <script src="js/jquery-1.11.0.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 400px;"></div>
	<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	var base = +new Date(2010, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var day = [Math.random() * 100];
var now = new Date(base);
function addData(shift) {
    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
    date.push(now);
    day.push((Math.random() - 0.4) *10 + day[day.length - 1]);
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
    if (shift) {
        date.shift();
        day.shift();
       data.shift();
    }

    now = new Date(+new Date(now) + oneDay);
}

    for(var i =1; i<500;i++){
         addData();
   
}

option = {
    title: {
		        text: '上证指数',
		        left: 0
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'line'
		        }
		    },
		    grid: {
		        left: '10%',
		        right: '10%',
		        bottom: '15%'
		    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        boundaryGap: [0, '50%'],
        type: 'value'
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }, {
		            name: 'MA10',
		            type: 'line',
		            smooth: true,
		             symbol: 'none',
                     stack: 'a',
		            lineStyle: {
		                normal: {opacity: 0.5}
		            },
		            data: day
		   }
    ]
};
app.timeTicket = setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }, {
		            name: 'MA10',
		            data: day
		   }]
    });
}, 1000);
	</script>
	</body>
</html>
